<template>
  <text v-if="isShow" style="font-size: 12px" class="mxp-badge" :class="[cusClass]" :style="[badgeStyle, cusStyle]">
    {{ shape === 'dot' ? '' : showValue }}
  </text>
</template>

<script lang="ts" setup>
  import { type CSSProperties, computed } from 'vue';
  import type { $AllColorStr, $ColorType } from '@/mxp-ui/mxp-tool/types/interface';
  import { defThemeColor } from '../mxp-tool/theme/theme';
  import { isDarkColorStorage, lightenDarkenColorStorage } from '../mxp-tool/utils/color';
  export type $BadgeProps = {
    /** 显示的内容 */
    badge?: number | string;
    /** 最大值，超过最大值会显示 '{max}+' */
    max?: number;
    /** 按钮的预置样式支持 "error" | "info" | "primary" | "success" | "warning" 和自定义的颜色（支持渐变色） 如#ff0000 */
    background?: $AllColorStr | $ColorType | `linear-gradient(${string})`;
    /** 字体颜色 */
    color?: $AllColorStr;
    /** 当数值为 0 时，或 者 空 时是否显示 */
    showEmpty?: boolean;
    /** 镂空时是否有背景色 */
    plainBackground?: boolean;
    /** 徽标形状，circle-四角均为圆角，square-小圆角，horn-左下角为直角，dot-仅显示一个小圆点 */
    shape?: 'circle' | 'dot' | 'horn' | 'square';
    /** 格式化 ellipsis表示超过最大值显示'...’ limit表示会转换成 1k，2.1w 等形式显示，overflow表示超过最大值显示最大值加号如：99+ */
    format?: 'ellipsis' | 'limit' | 'overflow';
    /** 是否镂空 */
    plain?: boolean;
    /** 自定义的样式属性 */
    cusStyle?: CSSProperties;
    /** 自定义类名 */
    cusClass?: string;
  };
  defineOptions({
    name: 'mxp-badge',
  });

  const props = withDefaults(defineProps<$BadgeProps>(), {
    badge: '',
    max: 999,
    color: undefined,
    background: 'error',
    showEmpty: false,
    shape: 'circle',
    plainBackground: false,
    format: 'overflow',
    plain: false,
    cusStyle: () => ({}),
    cusClass: '',
  });

  const isShow = computed(() => (!props.badge ? props.showEmpty : true));

  const badgeStyle = computed<CSSProperties>(() => {
    const background = props.background in defThemeColor.value ? defThemeColor.value[props.background as $ColorType] : props.background;
    const style: CSSProperties = {
      color: props.color ? props.color : isDarkColorStorage(props.background) ? defThemeColor.value.text : defThemeColor.value.textLight,
      background,
    };
    if (props.shape === 'dot') {
      style.padding = '4px';
      style.borderRadius = '999px';
    } else {
      style.borderRadius = props.shape === 'horn' ? '9999px 9999px 9999px 0px' : props.shape === 'square' ? '4px' : '9999px';
    }

    if (props.plain) {
      style.color = props.color || background;
      style.background = props.plainBackground ? lightenDarkenColorStorage(background, 0.1) || 'transparent' : 'transparent';
      style.borderColor = props.color || background;
      style.borderWidth = '1px';
      style.borderStyle = 'solid';
    }
    return style;
  });

  const showValue = computed(() => {
    if (!isNaN(Number(props.badge))) {
      const value = Number(props.badge);
      if (props.format === 'overflow') {
        return value > props.max ? `${props.max}+` : value;
      } else if (props.format === 'ellipsis') {
        return value > props.max ? '...' : value;
      } else if (props.format === 'limit') {
        return value > 999 ? (value >= 9999 ? `${Math.floor((value / 1e4) * 100) / 100}w` : `${Math.floor((value / 1e3) * 100) / 100}k`) : value;
      } else {
        return props.badge;
      }
    } else {
      return props.badge;
    }
  });
</script>

<style lang="scss" scoped>
  .mxp-badge {
    display: inline-flex;
    padding: 3px 8px;
    font-size: 12px;
    transform: scale(0.7);
  }
</style>
